<template>
    <!-- 页面背景 -->
	<view class="page-container">
	
		<view class="bg_flow">
			<!-- flex的包围容器 -->
			<view class="bg_flow_container">	
				<!-- 顶部安全区域占位 -->
				<view class="navbar" :style="{ paddingTop: safeAreaInsets.top-30 + 'px' }"></view>
				<view class="header">	
					<view class="logo">
						<image src="@/static/logo_hiack.png"></image>
					</view>
				</view>
				<!-- 个人信息 -->
				<view class="profile-top"> 
						<view class="avatar-container">
							<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" src="../../static/user.png"></image>
							</button>
						</view>			
						<view class="username-container">
							<text class="username">用户名</text>
						</view>
				</view>
				<!-- 统计信息 -->
				<view class="static">
						<view class="static-item">
							<text class="stat-value">9</text>
							<text class="stat-label">累计得分</text>
						</view>
						<view class="static-divider">|</view>
						<view class="static-item">
							<text class="stat-value">1</text>
							<text class="stat-label">历史场次 ></text>
						</view>
				</view>
			</view>
			<!-- 波浪分隔 -->
			<view class="wave-separator">
			  <svg viewBox="0 0 1440 120" preserveAspectRatio="none">
				<path d="M0,60 C240,0 480,120 720,60 C1000,0 1240,120 1440,60 L1440,120 L0,120 Z" fill="#e6eee7"></path>
			  </svg>
			</view>
		</view>
		
		<!-- 功能工具区域 - 紧贴波浪下方 -->
		<view class="gonenengtool">
			<!-- 设置卡片 1：头像/昵称 -->
			<view class="card">
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🙂</text>
						<text class="cell-title">头像</text>
					</view>
					<view class="cell-right">
						<image class="cell-avatar-mini" src="../../static/user.png"></image>
						<text class="arrow">›</text>
					</view>
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🆔</text>
						<text class="cell-title">昵称</text>
					</view>
					<view class="cell-right">
						<text class="cell-desc">四星瓢虫</text>
						<text class="arrow">›</text>
					</view>
				</view>
			</view>
							
			<!-- 设置卡片 2：其他项 -->
			<view class="card">
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">💰</text>
						<text class="cell-title">金币任务</text>
					</view>
					<text class="arrow">›</text>
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">👥</text>
						<text class="cell-title">关于Hi Ack</text>
					</view>
					<text class="arrow">›</text>
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">⚠️</text>
						<text class="cell-title">免责声明</text>
					</view>
					<text class="arrow">›</text>
				</view>
			</view>
			
			
			
			
			<!-- 设置卡片 3：其他项 -->
			<view class="card">

				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🎨</text>
						<text class="cell-title">暗黑模式</text>
					</view>
					<switch class="cell-switch" checked="false" />
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🔊</text>
						<text class="cell-title">清除历史数据</text>
					</view>
					<switch class="cell-switch" checked="false" />
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🔊</text>
						<text class="cell-title">使用指南</text>
					</view>
					<switch class="cell-switch" checked="false" />
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🔊</text>
						<text class="cell-title">迭代日志</text>
					</view>
					<switch class="cell-switch" checked="false" />
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🔊</text>
						<text class="cell-title">客服建议</text>
					</view>
					<switch class="cell-switch" checked="false" />
				</view>
				<view class="cell">
					<view class="cell-left">
						<text class="cell-icon">🔊</text>
						<text class="cell-title">客服建议</text>
					</view>
					<switch class="cell-switch" checked="false" />
				</view>
			</view>			
			
		
		</view>
		
		<!-- 自定义底部导航栏 -->
		<customtabbar ></customtabbar>
	
	</view>
	
</template>

<script setup>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 引入自定义底部导航栏组件
import customtabbar from "@/components/customtabbar/customtabbar.vue";
import { ref } from 'vue';

const avatarUrl = ref('/static/user.png');
const userName = ref('未设置昵称'); 
const pointSum = ref(111); 
const usagesCount = ref(222); 

</script>

<style>
.page-container {
    width: 100%;
    min-height: 100vh;
    background-color: #e6eee7; /* 背景填充 */
    position: relative;
    display: flex;
    flex-direction: column;
}

.bg_flow {
    width: 100%;
    height: 40vh;
    background-image: 
        radial-gradient(closest-side, rgba(0, 153, 255, 0.5), rgba(255, 255, 255, 0)),
        radial-gradient(closest-side, rgba(102, 0, 204, 0.5), rgba(255, 102, 255, 0)),
        radial-gradient(closest-side, rgba(0, 255, 255, 0.5), rgba(153, 255, 255, 0)),  
        radial-gradient(closest-side, rgba(34, 139, 34, 0.5), rgba(124, 252, 0, 0)),  
        radial-gradient(closest-side, rgba(255, 0, 153, 0.5), rgba(255, 153, 255, 0));
    background-size: 
        130vmax 130vmax, 
        80vmax 80vmax, 
        90vmax 90vmax, 
        110vmax 110vmax, 
        90vmax 90vmax;
    background-position:
        -80vmax -80vmax, 
        60vmax -30vmax, 
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 3s movement linear infinite;
    position: relative;
    z-index: 1;
}
/* 背景动画关键帧 */
@keyframes movement {
    0%,
    100% {
        background-size: 
            130vmax 130vmax, 
            80vmax 80vmax, 
            90vmax 90vmax, 
            110vmax 110vmax, 
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax, 
            60vmax -30vmax, 
            10vmax 10vmax,
            -30vmax -10vmax, 
            50vmax 50vmax;
    }
    25% {
        background-size: 
            100vmax 100vmax, 
            90vmax 90vmax, 
            100vmax 100vmax, 
            90vmax 90vmax, 
            60vmax 60vmax;
        background-position:
            -60vmax -90vmax, 
            50vmax -40vmax,
            0vmax -20vmax,
            -40vmax -20vmax,
            40vmax 60vmax;
    }
    50% {
        background-size:
            80vmax 80vmax, 
            110vmax 110vmax, 
            80vmax 80vmax, 
            60vmax 60vmax, 
            80vmax 80vmax;
        background-position:
            -50vmax -70vmax, 
            40vmax -30vmax, 
            10vmax 0vmax, 
            20vmax 10vmax, 
            30vmax 70vmax;
    }
    75% {
        background-size: 
            90vmax 90vmax, 
            90vmax 90vmax, 
            100vmax 100vmax, 
            90vmax 90vmax, 
            70vmax 70vmax;
        background-position:
            -50vmax -40vmax, 
            50vmax -30vmax, 
            20vmax 0vmax,
            -10vmax 10vmax, 
            40vmax 60vmax;
    }
}

.bg_flow_container{
    width: 100%;
    margin: auto;
    position: relative;
    z-index:2;
}
.navbar{
	background-color: darkgoldenrod;
}	
.header{
    width: 100%;
    height: 100rpx;
    margin-top: 40rpx;	
    display: flex;
    align-items: center;
    justify-content: space-between	
}

/* 头部 logo 样式 */
.logo{
    width: 270rpx;
    height: 100rpx;
}

/* 头部 logo 图片样式 */
.logo image{
    width: 100%;
    height: 100%;
    /* 平铺 */
}

/* 波浪分隔样式 */
.wave-separator{
    width: 100%;
    height: 120rpx;
    overflow: hidden;
    line-height: 0;
    position: absolute;
    left: 0;
    bottom: -1px; /* 轻微下移避免 SVG 抗锯齿产生的1px缝隙 */
    z-index: 1;
    pointer-events: none;
}
.wave-separator svg{
    display: block;
    width: 100%;
    height: 100%;
}
	
/* 个人信息顶部容器：头像 + 昵称 */
.profile-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; 
	margin-bottom: 20rpx; 
	margin-top: 30rpx;
}
	
.avatar-container {
	/* background: red; */
	margin-bottom: 20rpx;
}
.avatar-container button {
  background-color: transparent; /* 清除 button 默认背景 */
  padding: 0; /* 清除 button 内边距，避免额外空白 */
  margin: 0; /* 清除按钮外边距 */
  border: none; /* 清除 button 边框 */
  outline: none; /* 清除按钮点击时的轮廓 */
  box-shadow: none; /* 清除按钮阴影 */
}	
.avatar {
	width: 160rpx; 
	height: 160rpx; 
	border-radius: 50%; 
	border: 4rpx solid #fff;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	outline: none; /* 清除图片轮廓 */
	display: block; /* 确保图片正确显示 */
}
	
.username-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
}
	
.username {
	font-size: 42rpx; 
	font-weight: bold; 
	color: #333;
}
	
.static {
	display: flex;
	justify-content: center; 
	align-items: center;
	margin-top: 30rpx; 
}
	
.static-item {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  margin: 0 30rpx; 
}
	
.stat-value {
	  font-size: 36rpx; 
	  font-weight: bold;
	  color: #333;
	  margin-bottom: 8rpx;
}
	
.stat-label {
	  font-size: 26rpx; 
	  color: #666; 
}
	
.static-divider {
	  font-size: 36rpx; 
	  color: #999; 
	  margin: 0 20rpx;
}

.gonenengtool{
    z-index: 10;
	/* min-height: 30vh; */
    position: relative;
    margin-top: -20rpx; /* 负外边距使其上移与波浪区域重叠 */
    padding: 0 30rpx;
    width: 100%;
    box-sizing: border-box;
}

.card{
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6rpx);
    border-radius: 24rpx;
    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
    padding: 6rpx 0;
    margin: 20rpx 0;
}
.cell{ display:flex; align-items:center; justify-content: space-between; padding: 26rpx 28rpx; }
.cell + .cell{ border-top: 2rpx solid #f1f2f4; }
.cell-left{ display:flex; align-items:center; }
.cell-icon{ font-size: 34rpx; margin-right: 18rpx; }
.cell-title{ font-size: 30rpx; color:#1f2a37; }
.cell-right{ display:flex; align-items:center; }
.cell-desc{ margin-right: 10rpx; color:#6b7280; font-size: 28rpx; }
.arrow{ color:#c0c4cc; font-size: 40rpx; margin-left: 10rpx; }
.cell-avatar-mini{ width: 56rpx; height: 56rpx; border-radius: 50%; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); margin-right: 8rpx; }
.cell-switch{ transform: scale(0.9); }
</style>